<template>
  <div>
    <!-- <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
      :defaultHeight="284"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </template>
    </BaseForm>
 -->
    <el-form
      ref="ruleFormRef"
      :model="searchParams"
      label-width="120px"
      style="padding: 16px 16px 0 16px"
      :inline="true"
    >
      <el-form-item label="片区/村社名称">
        <el-input
          suffix-icon="xxxx"
          v-model="searchParams.communityName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="供电单位">
        <selectPage
          :item="powerItem"
          v-model="searchParams.powerId"
          @update:modelValue="changePower"
        />
      </el-form-item>
      <el-form-item label="供电线路">
        <selectPage
          :item="lineItem"
          ref="LineRef"
          v-model="searchParams.lineId"
          :search="lineSearch"
          @update:modelValue="changeLine"
        />
      </el-form-item>
      <el-form-item label="台区">
        <selectPage
            ref="AreaRef"
          :item="areaItem"
          v-model="searchParams.areaId"
          :search="areaSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon>
            <Search />
          </el-icon>
          查询
        </el-button>
        <el-button @click="resetForm">
          <el-icon>
            <RefreshLeft />
          </el-icon>
          重置
        </el-button>
        <el-button type="primary" @click.prevent="handleEdit({})">
          <el-icon>
            <Plus />
          </el-icon>
          添加
        </el-button>
      </el-form-item>
    </el-form>
    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListCommunityResDto"
      :searchParams="searchParams"
      :defaultHeight="284"
      :serial="true"
    >
      <el-table-column prop="communityName" label="片区/村社名称" />
      <el-table-column prop="provinceName" label="行政区划">
        <template #default="scope">
          <span>{{
            scope.row.provinceName +
            "-" +
            scope.row.cityName +
            "-" +
            scope.row.regionName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="详细地址">
        <template #default="scope">
          <Tooltip :text="scope.row.address"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="供电单位">
        <template #default="scope">
          {{ getPowerName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="供电线路">
        <template #default="scope">
          {{ getLineName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="台区">
        <template #default="scope">
          {{ getAreaName(scope.row) }}
        </template>
      </el-table-column>

      <!--  <el-table-column prop="areaName" label="供电单位（供电线路）（台区）">
        <template #default="scope">
          <div
            style="margin-left: 2px; margin-right: 2px; margin-top: 5px"
            v-for="item in scope.row.communityAreaResDtoList"
            type="info"
            :key="`${item.powerId}-${item.lineId}`"
          >
            <span v-if="getAddress(item).length < 10">{{
              getAddress(item)
            }}</span>
            <el-tooltip
              v-else
              class="box-item"
              effect="dark"
              :content="getAddress(item)"
              placement="top"
            >
              <span class="text_ellipsis">{{ getAddress(item) }}</span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="updateTime" label="最后修改时间" width="170">
        <template #header>
          <span>最后修改时间</span>
          <SortTable
            :sortTablekey="sortTablekey"
            @click="sortTablekey = 1"
            :handleSearch="handleSearch"
          ></SortTable>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
      :areaList="areaList"
      :powerSupplyIdList="powerSupplyIdList"
    ></EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from "./communityEditForm.vue";
import { basicConfigService } from "@/api/basicConfig";
import openMsgBox from "@/hooks/messageBox.js";
import selectPage from "@/components/selectPage.vue";
const LineRef = ref('LineRef')
const AreaRef = ref('AreaRef')
const areaList = reactive([]);
const searchParams = ref({
  communityName: "",
  areaId: "",
  powerId: "",
  lineId: "",
});
const powerItem = ref({
  name: "供电单位",
  key: "powerId",
  funName: "getByAreaQueryByPower",
  option: {
    name: "powerName",
    value: "powerId",
  },
});
const lineSearch = ref({
  powerId: searchParams.value.powerId,
});
const lineItem = ref({
  name: "供电线路",
  key: "lineId",
  funName: "getByAreaQueryByLine",
  option: {
    name: "lineName",
    value: "lineId",
  },
});
const areaSearch = ref({
  powerId: searchParams.value.powerId,
  lineId: searchParams.value.lineId,
});
const areaItem = ref({
  name: "台区",
  key: "areaId",
  funName: "getByAreaQueryByArea",
  option: {
    name: "areaName",
    value: "areaId",
  },
});

const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = "") => {
  if (e != "sort") sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const item = ref({});
const visibleEditForm = ref(false);
const handleEdit = (row) => {
  item.value = { ...row };
  visibleEditForm.value = true;
};
const lineIdList = ref([]);
const powerSupplyIdList = ref([]);
const areaIdList = ref([]);

const getPowerName = (row) => {
  let powerNames = row.communityAreaResDtoList?.map((n) => n.powerName);
  if (powerNames.length > 0) {
    return [...new Set(powerNames)].join("、");
  }
  return "";
};
const getLineName = (row) => {
  let lineNames = row.communityAreaResDtoList?.map((n) => n.lineName);
  if (lineNames.length > 0) {
    return [...new Set(lineNames)].join("、");
  }
  return "";
};
const getAreaName = (row) => {
  let areaName = row.communityAreaResDtoList?.map((n) => n.areaName);
  if (areaName.length > 0) {
    return [...new Set(areaName)].join("、");
  }
  return "";
};
const getAddress = (row) => {
  return `${row.powerName}（ ${row.lineName} ）（ ${row.areaName} ）`;
};

const resetForm = () => {
  // LineRef.value.loadmore()
  // AreaRef.value.loadmore()
  searchParams.value.communityName = ''
  searchParams.value.powerId = ''
  searchParams.value.lineId = ''
  searchParams.value.areaId = ''
  lineSearch.value.powerId = ''
  areaSearch.value.powerId = ''
  areaSearch.value.lineId = ''
  handleSearch();
};


const changePower = (val: any) => {
  lineSearch.value.powerId = val;
  areaSearch.value.powerId = val;
  searchParams.value.lineId = "";
  searchParams.value.areaId = "";
};
const changeLine = (val: any) => {
  areaSearch.value.lineId = val;
  searchParams.value.areaId = "";
};
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return basicConfigService.communityBatchDel({ data: [row.communityId] });
    },
    () => {
      handleSearch();
    }
  );
};
</script>

<style lang="less" scoped></style>
